<template>
	<view>
		<view class="u-skeleton">
			<view class="step">
				<counseling-step class="u-skeleton-fillet" :stepOptions="stepOptions"></counseling-step>
			</view>
			<view class="input-question">
				<view class="title">简单描述一下问题</view>
				<view class="uni-textarea">
					<textarea class="text u-skeleton-fillet" placeholder-style="color:#5b5e67" placeholder="方便律师更快为您解答"/>
				</view>
			</view>
			<view class="telephone">
				<view class="item" @click="handleClick(1)">
					<view class="name u-skeleton-fillet">服务类型</view>
					<view class="phone u-skeleton-fillet" style="display: flex;align-items: center;">
						<view>{{ confirmServiceText }}</view>
						<view class="iconfont icongengduo" style="font-size: 28rpx;padding-left: 10rpx;"></view>
						<u-picker mode="selector" @confirm="confirm($event,1)" v-model="showService" :default-selector="[]" :range="selector"></u-picker>
					</view>
				</view>
				<view class="item" @click="handleClick(2)">
					<view class="name u-skeleton-fillet">合同类型</view>
					<view class="phone u-skeleton-fillet" style="display: flex;align-items: center;">
						<view>{{ confirmCategoryText }}</view>
						<view class="iconfont icongengduo" style="font-size: 28rpx;padding-left: 10rpx;"></view>
						<u-picker mode="selector" @confirm="confirm($event,2)" v-model="showCategory" :default-selector="[]" :range="selector"></u-picker>
					</view>
				</view>
				<view class="item">
					<view class="name u-skeleton-fillet">参考价格</view>
					<view class="phone u-skeleton-fillet" style="padding-right: 4rpx;">¥300起</view>
				</view>
				<view class="item">
					<view class="name u-skeleton-fillet">服务订金</view>
					<view class="phone u-skeleton-fillet" style="color: #eb6657;padding-right: 4rpx;">¥30</view>
				</view>
			</view>
			<view class="btn-con" v-show="!loading" @click="pay">
				<my-button>支付订单</my-button>
			</view>
			<!-- <u-popup v-model="popShow" mode="bottom" length="50%" :closeable="true" :duration="200">
				<view class="pop-title">请选择支付方式</view>
				<view class="pop-price">
					金额 <text>¥3728.00</text>元
				</view>
				<view class="pay-way">
					<view class="item" v-for="(item, index) in payWay" :key="index" @click="selectPay(item)">
						<view :class="['iconfont', item.cla]"></view>
						<view class="name">{{ item.val }}</view>
						<view class="iconfont iconduihao" v-show="item.sel"></view>
					</view>
				</view>
				<view class="btn-con" @click.stop="confirmPay">
					<my-button>确认支付</my-button>
				</view>
			</u-popup> -->
			<popup-pay :popShow="popShow" @closePopup="closePopup" @confirmPay="confirmPay"></popup-pay>
		</view>
		
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import counselingStep from '../../components/counseling-step/counseling-step.vue'
	import myButton from '../../components/button/button.vue'
	import popupPay from '../../components/popup-pay/popup-pay.vue'
	export default {
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				stepOptions: [
					{
						step: 1,
						val: '支付订单',
						show: true
					},
					{
						step: 2,
						val: '律师接单',
						show: true
					},
					{
						step: 3,
						val: '开始咨询',
						show: true
					},
				],
				showService: false,
				showCategory: false,
				selector: ['dsa', 'tgb', 'yhn'],
				confirmServiceText: '选择',
				confirmCategoryText: '选择',
				popShow: false,
			}
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		methods: {
			handleClick(index) {
				if (index === 1) {
					this.showService = true
				} else if (index === 2) {
					this.showCategory = true
				}
			},
			confirm(e, i) {
				console.log(e, i)
				if (e.length > 0) {
					let index = e[0]
					if (i === 1) {
						this.confirmServiceText = this.selector[index]
					} else {
						this.confirmCategoryText = this.selector[index]
					}
					
				} else {
					let index = 0
					if (i === 1) {
						this.confirmServiceText = this.selector[index]
					} else {
						this.confirmCategoryText = this.selector[index]
					}
				}
			},
			pay() {
				this.popShow = true
			},
			confirmPay(data) {
				console.log(data)
				this.popShow = data.popShow
				uni.navigateTo({url: 'pay-success'})
			},
			closePopup(data) {
				console.log(data)
				this.popShow = data
			}
		},
		components: {
			counselingStep,
			myButton,
			popupPay
		}
	}
</script>

<style lang="scss">
	.step {
		padding: 40rpx 0;
	}
	.input-question {
		.title {
			font-size: 34rpx;
			color: #2c313c;
			font-weight: bold;
			padding: 20rpx 30rpx 30rpx;
		}
		.text {
			font-size: 28rpx;
			height: 184rpx;
			width: 648rpx;
			background-color: #ebecf0;
			border-radius: 6rpx;
			padding: 28rpx 20rpx;
			margin: 0 auto;
		}
	}
	.telephone {
		margin: 40rpx 30rpx 0;
		background-color: #ebecf0;
		border-radius: 6rpx;
		.item {
			display: flex;
			align-items: center;
			height: 99rpx;
			margin: 0 22rpx;
			border-bottom: 1rpx solid #dcdee2;
			border-radius: 0.5rpx;
			.name {
				font-size: 28rpx;
				color: #5b5e67;
			}
			.phone {
				font-size: 28rpx;
				color: #5b5e67;
				margin-left: auto;
			}
			.price {
				margin-left: auto;
				display: flex;
				align-items: center;
				view:nth-child(1) {
					font-size: 24rpx;
					color: #7a5507;
					padding: 7rpx 14rpx;
					background-color: #d9b975;
					border-radius: 12rpx 0rpx 12rpx 12rpx;
				}
				view:nth-child(2) {
					font-size: 22rpx;
					color: #adafb5;
					padding: 0 8rpx;
				}
				view:nth-child(3) {
					font-size: 28rpx;
					color: #eb6657;
				}
			}
			&:last-child {
				border-bottom: none;
			}
		}
	}
	.btn-con {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.pop-title {
		font-size: 36rpx;
		color: #1a1a1a;
		text-align: center;
		padding: 50rpx 0;
	}
	.pop-price {
		text-align: center;
		font-size: 28rpx;
		color: #1a1a1a;
		text {
			color: #eb6657;
			padding-left: 6rpx;
		}
	}
	.pay-way {
		padding: 0 30rpx;
		margin-top: 20rpx;
		.item {
			display: flex;
			height: 99rpx;
			align-items: center;
			border-bottom: 1rpx solid #e6e6e6;
			.iconduihao {
				margin-left: auto;
			}
			.name {
				font-size: 30rpx;
				color: #1a1a1a;
				padding-left: 18rpx;
			}
			.iconweixinzhifu {
				font-size: 40rpx;
				color: #09bb07;
			}
			.iconzhifubao {
				font-size: 40rpx;
				color: #1296db;
			}
			.iconduihao {
				font-size: 34rpx;
				color: #0d2647;
				margin-right: 28rpx;
			}
			&:last-child {
				// border-bottom: none;
			}
			
		}
	}
</style>
